<template>
	<div class="container" v-title data-title='我的佣金'>
		<div style="position: fixed;top: 0;left: 0;right: 0;z-index: 999;">
			<div class="my-information">
				<div class="col-sm-6">
					<div class="template-row-list">
						<label class="label-title">
							<div class="totalIcon">
								总
							</div>
						</label>
						<div class="row-content total-comm">{{customer.totalAmount}}<small>（万）</small></div>
					</div>
				</div>
				<div class="col-sm-6">
					<ul class="report-warp">
						<li class="active">
							<div class="template-row-list">
								<label class="label-title">
									<div class="waitIcon">
										待
									</div>
								</label>
								<div class="row-content wait-comm">{{customer.hasnobalance}}<small>（万）</small></div>
							</div>
						</li>
						<li>
							<div class="template-row-list">
								<label class="label-title">
									<div class="alreadyIcon">
										已
									</div>
								</label>
								<div class="row-content already-comm">{{customer.hasbalance}}<small>（万）</small></div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="commission-state" style="background-color: #f2f2f2;">
				<div class="col-sm-6">
					<div class="stateBtn active" commissionStatus='2'>
						待结佣
					</div>
				</div>
				<div class="col-sm-6">
					<div class="stateBtn" commissionStatus='1'>
						已结佣
					</div>
				</div>
			</div>
		</div>
		<ul class="report-warp" style="margin-top: 110px;">
			<li class="active" v-if="commissionFlag">
				<ul class="report-list-view commission-list-view">
					<li v-for="list in customerPremisesList">
						<div class="report-info-cell">
							<div class="report-list-details">
								<div class="report-phone">{{list.name}}</div>
								<div class="report-name">{{list.mobile}}</div>
								<div class="report-state">{{list.jieYongDate}}</div>
							</div>
							<div class="template-list-right">
								<div class="title">{{list.premisesName}}</div>
								<div class="content already">&nbsp;</div>
							</div>
						    <div class="template-list-right" v-if="params.commissionStatus=='2' && ((list.agentPendingCommission && list.agentPendingCommission != 0) || 
								(list.agentPendingCommission &&  list.agentReceivedCommission != 0))">
								<div class="title">待结佣金</div>
								<div class="content already">{{changeToDecimal(list.agentPendingCommission | list.agentPendingCommission,2)}}<small>元</small></div>
							</div>
							<div class="template-list-right" v-if="params.commissionStatus=='2' && ((list.agentPendingCommission && list.agentPendingCommission != 0) || 
								(list.agentPendingCommission &&  list.agentReceivedCommission != 0))">
								<div class="title">已结佣金</div>
								<div class="content already">{{changeToDecimal(list.agentReceivedCommission | list.agentReceivedCommission,2)}}<small>元</small></div>
							</div>
                            <div class="template-list-right" v-if="params.commissionStatus=='1' && ((list.agentPendingCommission && list.agentPendingCommission != 0) || 
								(list.agentPendingCommission &&  list.agentReceivedCommission != 0))">
								<div class="title">待结佣金</div>
								<div class="content already">{{changeToDecimal(list.agentPendingCommission | list.agentPendingCommission,2)}}<small>元</small></div>
							</div>
							<div class="template-list-right" v-if="params.commissionStatus=='1' && ((list.agentPendingCommission && list.agentPendingCommission != 0) || 
								(list.agentPendingCommission &&  list.agentReceivedCommission != 0))">
								<div class="title">已结佣金</div>
								<div class="content already">{{changeToDecimal(list.agentReceivedCommission | list.agentReceivedCommission,2)}}<small>元</small></div>
							</div>
							<div class="template-list-right" v-if="list.reward && list.reward!='0'" >
								<div class="title">带看奖</div>
								<div class="content already">{{changeToDecimal(list.reward | list.reward,2)}}<small>元</small></div>
							</div>
						</div>
					</li>
				</ul>
			</li>
		</ul>
		<mugen-scroll :handler="list" :should-handle="!loading" >
		</mugen-scroll>
	</div>
</template>
<script>
	import MugenScroll from 'vue-mugen-scroll'
	export default{
		data(){
			return {
				params:{
					pageSize:20,
					pageNo:0,
					commissionStatus:'2'
				},
				customerPremisesList:[],
				loading:false,
				customer:{
					totalAmount:0,
					hasbalance:0,
					hasnobalance:0
				},
				commissionFlag:true
			}
		},
		watch:{
			'params.commissionStatus':function(newValue,oldValue){
				var _self = this;
				_self.customerPremisesList = [];
				_self.params.pageNo=0;
				_self.list();
			}
		},
		components: {
			MugenScroll
		},mounted:function(){
			this.init();
			this.initCustomerPremises();
		},
		methods:{
			list:function(){
				var _self = this;
				_self.loading = true;
				_self.params.pageNo = _self.params.pageNo+1;
				var body = {};
				body.params = _self.params;
				var url = this.utilHelper.apiUrl+'/api/getPerCPCommissionList';
				_self.$http.post(url,body).then((response)=>{
					var result = response.body.resData;
					var errorMsg = result.resultMsg;
					if('comissionFlag'==errorMsg){
						_self.commissionFlag = false;
					}
					if(_self.params.pageNo>result.customerPremisesDtoPage.totalPages){
						_self.loading = true;
					}else{
						for(var i=0;i<result.customerPremisesDtoPage.rows.length;i++){
							_self.customerPremisesList.push(result.customerPremisesDtoPage.rows[i]);
						}
						_self.loading = false;
					}
				},(response)=>{
					layer.msg("系统异常");
				});
			},
			initCustomerPremises:function(){
				var _self = this;
				var body = {};
				body.params = {
					isturn:true
				}
				var url = this.utilHelper.apiUrl+'/api/getCustomerPremises';
				_self.$http.post(url,body).then((response)=>{
					var body = response.body;
					if(body.result==1){
							_self.customer.totalAmount = body.resData.totalAmount;
							_self.customer.hasbalance = body.resData.hasbalance;
							_self.customer.hasnobalance = body.resData.hasnobalance;
					}else{
						layer.msg("系统异常");
					}
				});
			},init:function(){
				var _self = this;
				$(function(){
					$(".stateBtn").click(function(){
						if( !$(this).hasClass("active")){
							$(this).addClass("active");
							$(this).parent().siblings().find(".stateBtn").removeClass("active");
							$(".report-warp>li").eq($(this).parent().index()).addClass("active").siblings().removeClass("active");
							_self.params.commissionStatus=$(this).attr('commissionStatus');
						}
					})
				})
			},
			changeToDecimal(value, point){
				var f_x = parseFloat(value);
			    if (isNaN(f_x)) {
			       value = "0";
			    }
			    var f_x = Math.round(value * 100) / 100;
			    var s_x = f_x.toString();
			    var pos_decimal = s_x.indexOf('.');
			    if (pos_decimal < 0) {
			        pos_decimal = s_x.length;
			        s_x += '.';
			    }
			    while (s_x.length <= pos_decimal + point) {
			        s_x += '0';
			    }
			    return s_x;
			}
		}
	}
	
	
</script>
